
import React, { useEffect, useState, useContext, forwardRef } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from "@common/presentational/CustomizeModal";
import QRCode from 'qrcode.react'
import { getInviteToken } from "@sagas/employee";
import { useDispatch, useSelector } from "react-redux";
const EmployeeInviteContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { empId } = params
    const dispatch = useDispatch()
    const { employeeInviteToken } = useSelector(state => state.employee)
    useEffect(() => {
        dispatch(getInviteToken({
            empId
        }))
    },[])
    const url = `${window.location.origin}/employee/invite?token=${employeeInviteToken}`
    return (
        <div className="employee-invite-modal">
            <div className={`employee-invite-qrCode${employeeInviteToken ? '' : ' hidden'}`}>
                        <QRCode value={url}
                                size={188}/>
                    </div>
            <div className="employee-invite-content">
                <div className="employee-invite-step-container">
                    <div className="employee-invite-step step-one step-with-sub">
                        扫描左侧二维码，分享链接
                        <div className="employee-invite-step-sub">链接有效期7天</div>
                    </div>
                    <div className="employee-invite-step step-two">
                        接收员工验证手机号码
                    </div>
                    <div className="employee-invite-step step-three">
                        验证成功，账号正式生效
                    </div>
                </div>
            </div>
        </div>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title="邀请员工加入" ref={ref} >
        <EmployeeInviteContent {...props} />
    </CustomizeModal>
))
